<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <script src="http://unpkg.com/spritejs/dist/spritejs.js"></script> -->
  <!-- <script src="http://unpkg.com/sprite-extend-3d/dist/sprite-extend-3d.js"></script> -->
  <script src="/lib/spritejs.js"></script>
  <script src="/lib/sprite-extend-3d.js"></script>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script src="/js/sprite-geo-earth.js"></script>
  <script>
    const {Scene} = spritejs;
    const container = document.getElementById('container');
    const scene = new Scene({
      container,
    });
    const layer = scene.layer3d('fglayer', {
      alpha: false,
      camera: {
        fov: 35,
      },
    });
    layer.camera.attributes.pos = [0, 0, 5000 / Math.min(layer.width, layer.height)];
    layer.camera.lookAt([0, 0, 0]);
    layer.gl.clearColor(0, 0, 0, 1);

    const {createGlobe,
      unproject,
      highlightMap,
      launchMissile,
      addMarker,
      cameraTo,
      addCurve,
      addBeam} = spritejs.globe;

    const globe = createGlobe(layer, {
      // data: './assets/world.json',
      orbit: true,
      raycast: true,
      // rotateX: -30,
      // rotateY: 210,
      highlight: true,
      // tick() {
      //   this.attributes.rotateY += 0.1;
      // },
    });

    function randomColor() {
      const hue = Math.floor(Math.random() * 360);
      return `hsl(${hue}, 100%, 50%)`;
    }

    addMarker(globe, {
      latitude: 0,
      longitude: 0,
    });

    // setTimeout(() => {
    //   cameraTo(globe, {
    //     latitude: 0, // 39.9,
    //     longitude: 0, // 116.3,
    //     duration: 1500,
    //   });
    // }, 1500);

    // for(let i = 0; i < 100; i++) {
    //   // addMarker(globe, {
    //   //   latitude: 90 - Math.random() * 180,
    //   //   longitude: 180 - Math.random() * 360,
    //   //   // lifeTime: 1000,
    //   //   // height: 2.0,
    //   //   color: randomColor(),
    //   //   // speed: 0.5,
    //   //   // segments: 4,
    //   // });
    //   addBeam(globe, {
    //     latitude: 90 - Math.random() * 180,
    //     longitude: 180 - Math.random() * 360,
    //     // lifeTime: 1000,
    //     // height: 2.0,
    //     color: randomColor(),
    //     // speed: 0.5,
    //     // segments: 4,
    //   });
    // }

    setInterval(() => {
      const from = {
        latitude: 90 - 180 * Math.random(),
        longitude: 180 - 360 * Math.random(),
      };
      const to = {
        latitude: 90 - 180 * Math.random(),
        longitude: 180 - 360 * Math.random(),
      };
      const color = randomColor();
      const lifeTime = 1000;
      const height = 2.0;
      const width = 1.0;

      addMarker(globe, {
        ...from,
        lifeTime,
        height,
        color,
        width,
        // speed: 0.5,
        // segments: 4,
      });

      setTimeout(() => {
        addMarker(globe, {
          ...to,
          lifeTime,
          height,
          color,
          width,
          // speed: 0.5,
          segments: 4,
        });
      }, 0.5 * lifeTime);

      launchMissile(globe, {
        from,
        to,
        color,
        lifeTime,
        height,
        thickness: 0.75 * width,
      });
    }, 100);

    const curve = addCurve(globe, {
      from: {
        latitude: 0,
        longitude: 0,
      },
      to: {
        latitude: 30,
        longitude: 30,
      },
    });
  </script>
</body>
</html>